<template>
  <div class="custom-item-table">
    <div v-if="totalFields.length" class="total-box">
      <h3 class="custom-title total-title">Total</h3>
      <el-divider></el-divider>
      <div class="total-list">
        <div class="total-item" v-for="(field, index) in totalFields" :key="index">
          <span class="total-text">{{ field.label }}:</span>
          <span class="total-value">{{ totalData[field.key] }}</span>
        </div>
      </div>
    </div>

    <vxe-table
      ref="xTable"
      border
      class="my-table"
      size="mini"
      keep-source
      show-overflow
      show-header-overflow="title"
      :scroll-y="{ enabled: true }"
      :keyboard-config="keyboardConfig"
      :mouse-config="{ selected: true }"
      :column-config="{ resizable: true }"
      :row-config="rowConfig"
      :edit-config="editConfig"
      v-bind="$attrs"
    >
      <!-- 拖动列 -->
      <vxe-column width="50" title="Drag" drag-sort v-if="isShowSort" align="center" />

      <!-- 插槽渲染表格列 -->
      <slot name="columns" />

      <!-- 插槽渲染操作列 -->
      <vxe-column title="Controls" align="center" :width="controlsColumnWidth" fixed="right" show-overflow>
        <template #default="{ row }">
          <slot v-if="$slots.actionColumn" name="actionColumn" :row="row" />
          <template v-else>
            <vxe-button mode="text" size="mini" icon="vxe-icon-edit" @click="onHandleEdit(row)" />
            <vxe-button mode="text" size="mini" icon="vxe-icon-delete" @click="onHandleDelete(row)" />
          </template>
        </template>
      </vxe-column>
    </vxe-table>

    <vxe-toolbar v-if="isShowToolbar" ref="xToolbar">
      <template #buttons>
        <slot v-if="$slots.toolbarButtons" name="toolbarButtons" />
        <template v-else>
          <vxe-button
            status="primary"
            size="mini"
            :disabled="isDisabled"
            icon="vxe-icon-square-plus"
            @click="onInsertEvent(-1)"
            >New Data</vxe-button
          >
        </template>
      </template>
    </vxe-toolbar>
  </div>
</template>

<script setup>
const props = defineProps({
  controlsColumnWidth: {
    type: Number,
    default: 120
  },
  isShowSort: {
    type: Boolean,
    default: true
  },
  isDisabled: {
    type: Boolean,
    default: false
  },
  isShowToolbar: {
    type: Boolean,
    default: true
  },
  totalData: {
    type: Object,
    default: () => ({})
  },
  totalFields: {
    type: Array,
    default: () => []
  },
  keyboardConfig: {
    type: Object,
    default: () => ({
      isEdit: true,
      isArrow: true,
      isEnter: true,
      isTab: true,
      isDel: true,
      isBack: true,
      isEsc: true,
      editMethod({ $table, row, column }) {
        if (row[column.property] && typeof row[column.property] === 'string') {
          row[column.property] = row[column.property].trimEnd()
        }
        $table.setEditCell(row, column)
      }
    })
  },
  rowConfig: {
    type: Object,
    default: () => ({
      isCurrent: false,
      keyField: 'id',
      useKey: true
    })
  },
  editConfig: {
    type: Object,
    default: () => ({
      trigger: 'dblclick',
      mode: 'cell'
    })
  }
})

const emit = defineEmits(['handle-edit', 'handle-delete', 'insert-event'])

const xTable = ref(null)
const xToolbar = ref(null)

// 在组件挂载时，连接 xTable 和 xToolbar
onMounted(() => {
  xTable.value?.connect(xToolbar.value)
})

// 方法
const getTableInstance = () => xTable.value

const onHandleEdit = row => emit('handle-edit', row)
const onHandleDelete = row => emit('handle-delete', row)
const onInsertEvent = value => emit('insert-event', value)

defineExpose({
  getTableInstance
})
// 响应式数据
const totalFields = props.totalFields
const totalData = props.totalData
const controlsColumnWidth = props.controlsColumnWidth
const isShowSort = props.isShowSort
const isDisabled = props.isDisabled
const isShowToolbar = props.isShowToolbar
const keyboardConfig = props.keyboardConfig
const rowConfig = props.rowConfig
const editConfig = props.editConfig
</script>

<style scoped>
.my-table {
  width: 100%;
}

.vxe-dropdown--panel {
  z-index: 2010 !important;
}

.vxe-input--panel.type--date,
.vxe-input--panel.type--month,
.vxe-input--panel.type--week,
.vxe-input--panel.type--year {
  z-index: 9998 !important;
}

.vxe-select--panel,
.vxe-table--tooltip-wrapper {
  z-index: 9997 !important;
}

.total-title {
  margin-top: 10px;
}

.total-list {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.total-item {
  margin-right: 10px;
}

.total-text {
  font-weight: 600;
  font-size: 15px;
  margin-right: 4px;
}

.total-value {
  font-size: 15px;
  color: blue;
}
</style>
